既上一篇文章後而有的第 4 篇筆記學習文章,這樣的記錄學習方式,一方面可以回朔一下記憶(腦容量不夠 ><)。一方面在學習更多更深的技術時,可以看看當初學習的筆記,也可以拿來笑笑自已的文筆和理解力。
之前在工作上有時會套用別人寫好的 jQuery 套件,我也只會把我所要的 class 或是 id 改改。可以有效果了(動)就開心得不得了。但卻不清楚到底固中原理是什麼。直到真正的學習 jQuery 才清楚到,原來是這麼一回事。(jQuery 好好玩)。
我先用我善長的 CSS 來做例子
.head h1{ display: block;}
jQuery 像是指定 Class 的方式。
$(‘.head h1’).show(); //指定選擇器,要 jQuery 做什麼事。
忘了前面最重要的一點!
一定要先確保網頁已戴入 HTML, jQuery 才會開始做我們要他做的事件。
$(document).ready(function(event){
$(‘.head h1’).show(); //show();事件可以有很多種,jQuery 字典
});
上面程式理解後的,註解說明:
//選擇器 + 事件 ->讓網頁具有互動性(事件: EFFECTS> )
//像是動態增加 style 樣式
//像是 css 選擇器指定樣式。
CSS選擇器是 CSS 規則的一部分。它能讓你選定要調整哪個(或哪些)元素的樣式。
後記補充:
“”,’’ 是指定選擇器才需要$(‘document’) 我常錯的失誤(哭啊)。
補上jQuery字典 連結
老師每次講完課後,我都覺得頭頭是道,沒錯沒錯我也要奮勇向上。但,為什麼每次寫完都沒有動作?自我檢查,原來又是我的失誤,所以也把這個標記上來,以防萬一自已又犯錯。
HTML標籤選選$(‘h1’).show();
Class選選$(‘.h1’).show();
ID選選$(‘#h1’).show();
$(document).ready(function (event) {
$(".button").click(function(){
$("h1").hide();
});
});
理解後的說明:
在這個條件下,要做的事。
1.確保網頁已戴入 HTML
2.讀取".button"條件後,處理
3.指定事件。
小小比喻:
經過審慎思考後,已確認未來目標樣子(工程師,設計師,...師),首要條件初級門檻需要不斷的努力(不斷的拿寶物),才能事件晉級到資深工程師(才能有更大的寶物)。我的比喻有點嚴肅了><
以上是初級學習生在 jQuery 領域中所學習及理解的。若有不對之處,還請各位大大給我建議。我會虛心學習。